<!--
 @description 详情内容模块
 @fileName DetailInfo.vue
 @author zengqiongying
 @created 2023/04/21 12:44:44
-->
<template>
  <div class="archive-change-detail">
    <qmp-tabs v-model:active="tabActive" :offset-top="offsetTop" scrollspy sticky>
      <qmp-tab title="基础信息">
        <Card no-mg :round="false">
          <DealerDetail :detail="dealerData" />
        </Card>
        <Card no-mg :round="false">
          <Cell
            title="是否需要其他业务客户经理接收知晓"
            :modelValue="detail.isOtherReceiveManagerKnow"
            default-value="--"
            readonly
            dict-type-code="BOOLEANS"
          />
          <template v-if="[1, '1'].includes(detail.isOtherReceiveManagerKnow)">
            <Cell title="接收客户经理" default-value="--" readonly :modelValue="detail.receiveManagerName" />
            <template v-if="!!detail.receiveManagerCode">
              <Cell :modelValue="detail.receiveManagerCode" title="接收客户经理编码" readonly />
              <Cell :modelValue="detail.receiveManagerTypeName" title="接收客户经理类型" readonly />
              <Cell :modelValue="detail.receiveManagerTel" title="接收客户经理电话" readonly />
            </template>
          </template>
          <Cell title="提报意见" is-column custom :right="false" :modelValue="detail.submitAnOpinion" readonly />
        </Card>
      </qmp-tab>
      <qmp-tab title="收货地址">
        <Card no-mg :round="false">
          <template #title>
            <div class="c-tab-title">
              <div class="name">经销商收货地址</div>
              <div v-if="addressList.length > 0" class="more" @click="toPage('address')">详情</div>
            </div>
          </template>
          <Cell v-for="(item, i) in addressList" :key="i" is-column custom readonly>
            <div class="dis-detail-item">
              <div class="name">
                {{ item.name }}
                <span
                  class="ml8 w-normal"
                  :class="{
                    'color-org': item.changeType === 'A',
                    'color-normal': item.changeType === 'B',
                    'color-error': item.changeType === 'C'
                  }"
                >
                  {{ getChangeTypeName(item.changeType) }}
                </span>
              </div>
              <div class="color-grey">
                {{ item.provinceName }}{{ item.cityName }}{{ item.countryName }}{{ item.townName }}
                {{ item.address }}
              </div>
              <div class="person">
                {{ item.firstReceiver }} <span class="ml8">{{ item.firstReceiverPhone }}</span>
              </div>
            </div>
          </Cell>
          <qmp-empty v-if="addressList.length === 0" description="暂无收货地址" image-size="60px" />
        </Card>
      </qmp-tab>
      <qmp-tab title="经销商联系人">
        <Card no-mg :round="false">
          <template #title>
            <div class="c-tab-title">
              <div class="name">经销商联系人</div>
              <div v-if="contactsList.length > 0" class="more" @click="toPage('contacts')">详情</div>
            </div>
          </template>
          <Cell v-for="(item, i) in contactsList" :key="i" is-column custom readonly>
            <div class="dis-detail-item">
              <div>
                {{ item.name }}
                <span class="ml8">{{ item.contactPhone }}</span>
                <span
                  class="ml8 w-normal"
                  :class="{
                    'color-org': item.changeType === 'A',
                    'color-normal': item.changeType === 'B',
                    'color-error': item.changeType === 'C'
                  }"
                >
                  {{ getChangeTypeName(item.changeType) }}
                </span>
              </div>
              <div class="person">{{ item.contactTypeName }}</div>
            </div>
          </Cell>
          <qmp-empty v-if="contactsList.length === 0" description="暂无经销商联系人" image-size="60px" />
        </Card>
      </qmp-tab>
      <qmp-tab title="门店基本信息">
        <Card title="门店基本信息变更" no-mg :round="false">
          <ShopItem v-if="detail.shopDTOS && detail.shopDTOS.length > 0" :modelValue="shopInfo" readonly />
          <qmp-empty v-else description="暂无门店" image-size="60px" />
        </Card>
      </qmp-tab>
      <qmp-tab title="门店联系人">
        <Card no-mg :round="false">
          <template #title>
            <div class="c-tab-title">
              <div class="name">门店联系人</div>
              <div
                v-if="shopContactsList.length > 0 && shopInfo && shopInfo.code"
                class="more"
                @click="toPage('shopContacts')"
              >
                详情
              </div>
            </div>
          </template>
          <Cell v-for="(item, i) in shopContactsList" :key="i" is-column custom readonly>
            <div class="dis-detail-item">
              <div>
                {{ item.name }}
                <span class="ml8">{{ item.contactPhone }}</span>
                <span
                  class="ml8 w-normal"
                  :class="{
                    'color-org': item.changeType === 'A',
                    'color-normal': item.changeType === 'B',
                    'color-error': item.changeType === 'C'
                  }"
                >
                  {{ getChangeTypeName(item.changeType) }}
                </span>
              </div>
              <div class="person">{{ item.contactTypeName }}</div>
            </div>
          </Cell>
          <qmp-empty v-if="shopContactsList.length === 0" description="暂无门店联系人" image-size="60px" />
        </Card>
      </qmp-tab>
      <qmp-tab title="BPM审批信息">
        <Card title="BPM审批信息" no-mg :round="false">
          <Cell title="申请人" :modelValue="detail.createBy" default-value="--" readonly />
          <Cell
            title="申请时间"
            :modelValue="parseTime(detail.createTime, '{y}年{m}月{d}日')"
            default-value="--"
            readonly
          />
          <Cell title="BPM单号" :modelValue="detail.applyNo" default-value="--" readonly divider />

          <div v-for="(v, i) in detail.opinionDTOS" :key="i" class="group-box">
            <Cell title="步骤名" :modelValue="v.strStepName" default-value="--" custom readonly />
            <Cell title="操作时间" :modelValue="v.dtCreateDate" default-value="--" readonly />
            <Cell title="操作人" :modelValue="v.strApproverName" default-value="--" readonly />
            <Cell title="操作状态" :modelValue="v.strAction" default-value="--" readonly />
            <Cell title="意见留言" :modelValue="v.strComments" default-value="--" custom readonly />
          </div>
          <!-- <Cell
            title="档案科审核结果"
            :modelValue="detail.fileReviewResult"
            dictTypeCode="REVIEW_RESULT"
            default-value="--"
            readonly
            custom
            divider
          />

          <Cell
            title="档案科审批时间"
            :modelValue="parseTime(detail.fileReviewTime, '{y}年{m}月{d}日')"
            default-value="--"
            readonly
          />
          <Cell
            title="档案审核意见"
            :modelValue="detail.fileReviewAdvice"
            default-value="--"
            readonly
            is-column
            custom
            divider
          />
          <Cell
            title="权限处理结束时间"
            :modelValue="parseTime(detail.authorityReviewTime, '{y}年{m}月{d}日')"
            default-value="--"
            readonly
          /> -->
        </Card>
      </qmp-tab>
    </qmp-tabs>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, toRefs, reactive, watch, onMounted, onActivated, getCurrentInstance } from 'vue'
  import { useRouter } from 'vue-router'
  import Card from '@/components/Card/index.vue'
  import Cell from '@/components/Cell/index.vue'
  import DealerDetail from '../dealerChoice/DetailBasic.vue'
  import ShopItem from '../components/Shop/ItemView.vue'
  import { detail } from '@/apis/dealerMarketing/ArchiveChange'
  import { parseTime } from '@/utils'
  const none: any[] = [null, undefined, '']
  interface anyObjectModle {
    [key: string]: any
  }
  export default defineComponent({
    name: 'ArchiveChangeDetailInfo',
    components: { Card, Cell, DealerDetail, ShopItem },
    props: {
      id: {
        type: String,
        default: ''
      }
    },
    setup(props, ctx) {
      const { proxy }: any = getCurrentInstance()
      const $router = useRouter()
      const datas = reactive<anyObjectModle>({
        tabActive: '基础信息',
        offsetTop: '46px',
        detail: {}
      })
      // 经销商
      const dealerData = computed(() => {
        const d = datas.detail || {}
        const data = {
          code: d.customerCode,
          name: d.customerName,
          agencyName: d.officeName,
          personName: d.personName,
          isElecBusiniess: d.isElecBusiniess, // TODO:是否有电商配送权限字段待定
          operateArea: d.operateArea // TODO
        }
        return { ...d, ...data }
      })

      const addressList = computed(() => {
        const list: any[] = []
        const dtos = datas.detail?.addressDTOS || []
        dtos.forEach((e: any) => {
          if (none.includes(e.code)) {
            list.push(e)
          } else {
            // 去重，若isbefore=1和isbefore=0 都存在，取isbefore=0的数据
            const i = list.findIndex((v) => v.code === e.code)
            if (i > -1) {
              const o = list[i]
              if (o.isBefore === 1 && e.isBefore !== 1) {
                list[i] = e
              }
            } else {
              list.push(e)
            }
          }
        })
        return list
      })
      // 经销商联系人
      const contactsList = computed(() => {
        const contacts = datas.detail?.contactDTOS || []
        const list: any[] = []
        const dtos = contacts.filter((v: any) => v.contactScope === 1)
        dtos.forEach((e: any) => {
          if (none.includes(e.contactId)) {
            list.push(e)
          } else {
            // 去重，若isbefore=1和isbefore=0 都存在，取isbefore=0的数据
            const i = list.findIndex((v) => v.contactId === e.contactId)
            if (i > -1) {
              const o = list[i]
              if (o.isBefore === 1 && e.isBefore !== 1) {
                list[i] = e
              }
            } else {
              list.push(e)
            }
          }
        })
        return list
      })

      // 门店数据
      const shopInfo = computed(() => {
        const list = datas.detail?.shopDTOS || []
        const obj: anyObjectModle = {
          code: '',
          name: '',
          shopClassifyName: '',
          shopAddr: '',
          cityLevelName: '',
          marketLevelName: '',
          provinceName: '',
          cityName: '',
          countyName: '',
          townName: ''
        }
        if (list.length > 0) {
          list.forEach((v: any) => {
            const k = v.fieldCode
            obj[k] = v.afterValue || v.beforeValue
          })

          const { code, name, provinceName, cityName, countyName, townName } = list[0]
          return { ...obj, ...{ code, name, provinceName, cityName, countyName, townName } }
        }
        return obj
      })
      // 门店联系人
      const shopContactsList = computed(() => {
        const list = datas.detail?.contactDTOS || []
        return list.filter((v: any) => v.contactScope === 3)
      })

      const getDetail = () => {
        const id = `${props.id}`
        detail(id).then((res) => {
          datas.detail = res.data
          ctx.emit('data-change', datas.detail)
        })
      }
      watch(
        () => props.id,
        () => {
          getDetail()
        },
        {
          immediate: true
        }
      )

      const toPage = (path: string) => {
        const query: any = {
          id: props.id
        }

        if (path === 'shopContacts') {
          if (shopInfo.value && shopInfo.value.code) {
            query.shopCode = shopInfo.value.code
          } else {
            proxy.$toast('暂无门店信息，无法查看门店联系人')
            return
          }
        }
        $router.push({
          path: '/dealerArchiveChange/detail/' + path,
          query
        })
      }

      onMounted(() => {
        const el = document.querySelector('.qmp-nav-bar--fixed')
        const rect = el && el.getBoundingClientRect()
        datas.offsetTop = `${rect?.height}px`
      })
      onActivated(() => {
        getDetail()
      })
      const getChangeTypeName = (code: any) => {
        const obj: anyObjectModle = {
          A: '变更',
          B: '新增',
          C: '停用'
        }
        return obj[code] || ''
      }

      getDetail()

      return {
        ...toRefs(datas),
        dealerData,
        shopContactsList,
        shopInfo,
        addressList,
        contactsList,
        parseTime,
        toPage,
        getChangeTypeName
      }
    }
  })
</script>
<style lang="less" scoped>
  .archive-change-detail {
    /deep/ .group-card {
      margin-left: 0;
      margin-right: 0;
    }
    /deep/ .qmp-tab {
      font-weight: bold;
    }
    .c-tab-title {
      padding: 0 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--bg-global-weaker);
      .name {
        font: var(--font-main-title-strengthen);
        color: var(--texticon-default-strong);
      }
      .more {
        margin-left: auto;
        display: flex;
        align-items: center;
        font: var(--font-main-body);
        color: var(--texticon-default-stronger);
        &::before {
          content: '';
          width: 24px;
          height: 24px;
          margin-left: 4px;
          background-size: 24px 24px;
          background-repeat: no-repeat;
          background-image: url(~@/assets/images/more.png);
        }
      }
    }
  }
  .ml8 {
    margin-left: 8px;
  }
  .w-normal {
    font-weight: normal;
  }
  .dis-detail-item {
    font: var(--font-main-body);
    color: var(--texticon-default-strong);
    .name {
      font: var(--font-main-title-strengthen);
      color: var(--texticon-default-strong);
      margin-bottom: 2px;
    }
    .person {
      margin-top: 4px;
      color: var(--texticon-color-brand-normal);
    }
  }
</style>
